<template>
	<view class="page">
		<view class="list">
			<u-cell class="spotList" @click="toHref(item)" v-for="(item, index) in indexList" :key="index">
				<u-avatar slot="icon" shape="square" size="200" :src="item.coverImage"
					customStyle="border-radius:10px"></u-avatar>
				<view class="right" slot="title">
					<view class="p1">{{item.name}}</view>
					<view class="p2">
						<u-rate :count="count" size='33rpx' v-model="item.score" allowHalf='true' activeColor='#ff8f23'
							readonly></u-rate>
						<view style="font-size: 26rpx ; color: #5A607C;">
							{{item.score}}分
						</view>
					</view>
					<view class="p4">
						<view class="money">￥</view>
						<view class="price">
							{{item.minPrice}}
						</view>
						<view style="font-size: 24rpx; color: #5A607C;">
							/人均
						</view>
					</view>
				</view>
			</u-cell>
		</view>
		<uni-load-more :status="status" color="#007aff" />
	</view>
</template>

<script>
	import uniLoadMore from '@/compoments/load-more/index.vue'
	export default {
		data() {
			return {
				count: 5,
				indexList: [],
				fromData: {
					limit: 4,
					page: 1,
				},
				AddressList: []

			}
		},
		// onLoad() {
		// 	this.getRooms()
		// },

		mounted() {
			this.getRooms()
		},
		methods: {

			getRooms() {
				this.$api.get('/api/isFood/page', this.fromData)
					.then(res => {
						console.log('------+-++---+-+-+-++-++--+', res);
						this.indexList = res.data.data.list
					})
			},

			//跳转详情
			toHref(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pagesTrip/fineFood/details/details?list=" + JSON.stringify({
						...item
					})
				})

			},

		}
	}
</script>
<style lang="less">
	.u-cell__body {
		// padding: 24rpx !important;
		background-color: #fff !important;
		margin: 20rpx !important;
		border-radius: 16rpx !important;
	}

	.u-line {
		border-color: #f5f9fa !important;
	}
</style>
<style scoped lang="scss">
	.page {
		width: 710rpx;
		box-sizing: border-box;
		background-color: #fff;

	}

	.hander {
		padding: 24rpx !important;
		box-sizing: border-box;
		background-color: #fff;
	}

	.search-input {
		// width: ;
		height: 64rpx;
		// padding: ;

	}

	.category-main {
		// margin-top: 10rpx;
		// width: 702rpx;
		height: 150rpx;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		// align-content: center;
		.category-main-container {
			width: 90rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex-shrink: 2;
			flex-basis: 20%;
		}

		.image {
			height: 78rpx;
			width: 78rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.category-main-container text {
			margin-top: 5rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.spotList {
		padding: 25rpx;
		box-sizing: border-box;
	}



	.uni-page-head {
		z-index: 1;
	}

	.u-sticky {
		top: 88rpx !important;
	}

	.searchCondition {
		// position: relative;
		background-color: #f5f9fa;
		// margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		height: 40rpx;
		padding-top: 30rpx;

		.item {
			margin: 0 auto;

			.u-icon {
				justify-content: center;
			}
		}

	}


	.right {
		margin-left: 26rpx;

		.p1 {
			color: #111111;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;

		}

		.p2 {
			display: flex;
			margin: 20rpx 0 30rpx;
		}

		.p3 {
			text {
				display: inline-block;
				padding: 6rpx;
				background-color: #fff6e6;
				font-size: 22rpx;
				color: #FF7D01;
				margin-bottom: 18rpx;
				border-radius: 4rpx;
			}
		}

		.p4 {
			display: flex;
			font-size: 18rpx;
			color: #777;
			align-items: center;

			.money {
				font-size: 18rpx;
				color: #FF4141;
				margin-right: 4rpx;
			}

			.price {
				font-size: 30rpx;
				font-weight: bold;
				color: #FF4141;
				margin-right: 4rpx;
				font-family: Arial Bold, PingFang-SC-Bold, PingFang-SC;
				;
			}
		}
	}

	.sortBox {
		.tit {
			font-size: 32rpx;
			color: #333;
			text-align: center;
			margin-bottom: 40rpx;
			margin-top: 64rpx;
		}

		.sort {
			padding: 0 24rpx 40rpx;
			background-color: #fff;
			display: grid;
			gap: 40rpx 26rpx;
			grid-template-columns: auto auto auto auto;
			margin-bottom: 44rpx;

			text-align: center;

			text {
				background-color: #F5F8FA;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #666;
				height: 64rpx;
				line-height: 64rpx;
				// box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
				box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

				&.on {
					background-image: linear-gradient(to right, #0EBFFE, #00D3E8);
					color: #fff;
				}
			}
		}

		.btns {
			display: grid;
			padding: 0 30rpx 40rpx;
			gap: 0 20rpx;
			grid-template-columns: auto auto;

			.u-button--large {
				width: 94%;
				height: 40px;
			}
		}
	}
</style>